<template>
    <el-sub-menu index="3" :popper-offset="8" class="menu">
      <template #title> 用户名: {{ userData.username }} </template>
      <el-menu-item
        index="3-1"
        @click="openUserListDialog()"
        v-if="userData.type === 'admin'"
      >
        用户管理
      </el-menu-item>
      <el-menu-item index="3-2" @click="handleBack()">退出登录</el-menu-item>
    </el-sub-menu>
    <!-- 用户列表弹窗:放到子菜单里面会有问题？-->
    <user-list-dialog ref="userListDialog" />
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useUserDateStore } from '@/stores/user'
  import { logoutHttp } from '@/request/index'
  import { useRouter } from 'vue-router'
  import UserListDialog from '@/views/admin/components/UserListDialog.vue'
  
  const router = useRouter()
  const { userData } = useUserDateStore()
  

  
  // 退出登录
  const handleBack = async () => {
    const res = await logoutHttp({
      username: userData.username,
      type: userData.type,
    })
    if (res.code === 200) {
      router.push('/login')
      localStorage.removeItem('token')
  
    } else {
      alert('退出失败')
    }
  }
  
  //用户列表状态
  const userListDialog = ref(null)
  const openUserListDialog = () => {
    userListDialog.value.handleOpen()
  }
  </script>
  
  <style scoped>
  .menu {
    position: fixed;
    right: 0;
  }
  </style>
  